<template>
  <view class="package">
    <view class="space-between">
      <view>排行榜</view>
      <view class="data space-between">
        <view v-for="(item,index) in list" :key="index" :class="active===index?'active':''" @click="()=>active=index">
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="center lis">
      <view class="lis" v-for="(item,index) in tab" :key="index" :style="{color:type===index?'#1D8DFF':''}"
        @click="()=>type=index">
        {{item.name}}
      </view>
    </view>
    <view class="space-between sort" style="margin-bottom: 0px;">
      <view>排名</view>
      <view style="width:40%;">姓名</view>
      <view>收益(元）</view>
    </view>
    <view class="space-between sort" style="background-color: transparent;padding:20rpx;border-bottom:1px solid #eee;margin:0px;">
      <view>
        <image :src="first1" mode=""></image>
      </view>
      <view style="width:40%;">胡亚峰</view>
      <view>10.22</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { first1, first2, first3 } from '@/utils/Static';
  const active = ref(0)
  const list = [{ name: '今日' }, { name: '本周' }, { name: '本月' }, { name: '全部' }]
  const type = ref(0)
  const tab = [{ name: '红包收益' }, { name: '订单收益' }, { name: '加注量' }]
</script>

<style scoped lang="less">
  .data {
    width: 400rpx;
    height: 52rpx;
    border: 1px solid #1D8DFF;
    box-sizing: border-box;
    border-radius: 26rpx;

    view {
      width: 25%;
      text-align: center;
      font-size: 24rpx;
      color: #666666;
      height: 52rpx;
      line-height: 52rpx;
    }

    .active {
      background-color: #1D8DFF;
      color: #fff;
      border-radius: 26rpx;
    }
  }

  .lis {
    margin: 8rpx 30rpx 0px 0px;
  }
  .sort:nth-last-of-type(1){
   border-bottom: 0px !important;
  }
  .sort {
    width: 100%;
    background-color: #F2F8FF;
    padding: 15rpx 20rpx;
    box-sizing: border-box;
    margin: 15rpx 0px;
    border-radius: 5px;

    view {
      width: 25%;
      text-align: center;
    }
  }

  .space-between{
    image{
      width:40rpx;
      height:40rpx;
    }
  }
</style>